// 导入React
import React from "react";

function App() {
  // 定义一个函数组件
  // 使用小括号包裹JSX，避免分号陷阱
  // 属性名要使用驼峰命名法 onclick -> onClick
  // class属性要使用className代替
  // 标签必须闭合和html中的松散要求不一样
  return (
    <div>
      <h1 className="title">Hello JSX</h1>
      <hr />
    </div>
  );
}

// 或者使用箭头函数
// const App = () => {
//   // 使用小括号包裹JSX，避免分号陷阱
//   return (
//     // class属性要使用className代替
//     <div>
//       <h1 className="title">Hello JSX</h1>
//       {/* 标签必须闭合和html中不一样 */}
//       <hr/>
//     </div>
//   )
// }

// 导出组件
export default App;
